<template>
	<div class="icon">
		<ul>
			<li v-for="item in list" :key="item.id">
				<router-link to="/">
					<img :src="item.img">
					<p>{{item.txt}}</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'Icon',
		data(){
			return{
				list:[
					{id:1,img:'iconimg/1.png',txt:'周边游'},
					{id:1,img:'iconimg/2.png',txt:'国内游'},
					{id:1,img:'iconimg/3.png',txt:'出境游'},
					{id:1,img:'iconimg/4.png',txt:'自由行'},
					{id:1,img:'iconimg/16.png',txt:'酒店民宿'}
				]
			}
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: #000000;
	}
	.icon{
		overflow: hidden;
		width: 100%;
		border-bottom: 0.03rem solid gainsboro;
		height: 25%;
		padding: 0.6rem 0 0;
	}
	.icon ul li{
		float: left;
		width: 20%;
		text-align: center;
	}
	.icon p{
		font-size: 2vw;
		padding-top: 0.15rem;
		padding-bottom: 0.3rem;
	}
	.icon img{
		width: 1.1rem;
	}
</style>
